<template>
  <mescroll-uni
    @init="mescrollInit"
    :up="upOption"
    :down="downOption"
    @down="downCallback"
    @up="upCallback"
  >
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <input
          class="search-input"
          v-model="searchForm.xiquName"
          type="text"
          placeholder="搜索中医药科普..."
        />
        <view class="search-btn" @tap="search">
          <text class="iconfont icon-search">搜索</text>
        </view>
      </view>
      <view
        v-if="isAuth('xiquCollection', '新增')"
        class="add-btn"
        @click="onAddTap"
      >
        <text class="iconfont icon-plus"></text>
      </view>
    </view>

    <!-- 列表容器 -->
    <view class="list-container">
      <block v-for="(product, index) in list" :key="index">
        <!-- 列表项 -->
        <view
          class="list-item"
          :class="[index % 6 < 4 ? 'normal-item' : 'full-item']"
          @tap="onDetailTap(product)"
        >
          <image
            class="item-image"
            mode="aspectFill"
            :src="
              product.xiquPhoto ? baseUrl + product.xiquPhoto.split(',')[0] : ''
            "
          />

          <view class="item-content">
            <view class="item-title">{{ product.xiquName }}</view>

            <view
              class="item-value"
              v-if="product.xiquNewMoney || product.xiquValue"
            >
              <text v-if="product.xiquNewMoney" class="price"
                >￥{{ product.xiquNewMoney }}</text
              >
              <text v-else class="value">{{ product.xiquValue }}</text>
            </view>

            <view
              class="item-actions"
              v-if="
                isAuth('xiquCollection', '修改') ||
                isAuth('xiquCollection', '删除')
              "
            >
              <text
                v-if="isAuth('xiquCollection', '修改')"
                class="action-btn edit"
                @click.stop="onUpdateTap(product.id)"
              >
                <text class="iconfont icon-edit"></text> 编辑
              </text>
              <text
                v-if="isAuth('xiquCollection', '删除')"
                class="action-btn delete"
                @click.stop="onDeleteTap(product.id)"
              >
                <text class="iconfont icon-delete"></text> 删除
              </text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </mescroll-uni>
</template>

<script>
export default {
  data() {
    return {
      user: {}, //当前登录表的所有参数
      sessionTable: uni.getStorageSync("nowTable"), //登录账户所在表名
      role: uni.getStorageSync("role"), //权限
      userId: uni.getStorageSync("userid"), //当前登录人的id
      btnColor: [
        "#67c23a",
        "#909399",
        "#e6a23c",
        "#f56c6c",
        "#356c6c",
        "#3498db",
        "#f093a9",
        "#a7c23a",
        "#104eff",
        "#90f794",
        "#a21233",
        "#8e44ad",
      ],
      queryList: [
        {
          queryName: "中医药科普收藏名称",
        },
      ],
      sactiveItem: {
        padding: "0",
        boxShadow: "0 0 0px rgba(0,0,0,.3)",
        margin: "0 10rpx",
        borderColor: "rgba(0,0,0,1)",
        backgroundColor: "var(--publicMainColor)",
        color: "#fff",
        borderRadius: "0 40rpx 40rpx 0",
        borderWidth: "0",
        width: "auto",
        lineHeight: "160rpx",
        fontSize: "28rpx",
        borderStyle: "solid",
      },
      sitem: {
        padding: "0",
        boxShadow: "0 0 0px rgba(0,0,0,.3)",
        margin: "0 10rpx",
        borderColor: "rgba(0,0,0,1)",
        backgroundColor: "var(--publicSubColor)",
        color: "#fff",
        borderRadius: "0 40rpx 40rpx 0",
        borderWidth: "0",
        width: "auto",
        lineHeight: "160rpx",
        fontSize: "28rpx",
        borderStyle: "solid",
      },

      list: [],
      mescroll: null, //mescroll实例对象
      downOption: {
        auto: false, //是否在初始化后,自动执行下拉回调callback; 默认true
      },
      upOption: {
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        textNoMore: "~ 没有更多了 ~",
      },
      hasNext: true,
      searchForm: {},
      /*1111*/
      xiquCollectionTypesList: [],

      xiquTypesList: [],
      CustomBar: "0",
    };
  },
  computed: {
    baseUrl() {
      return this.$base.url;
    },
  },
  async onShow() {
    this.btnColor = this.btnColor.sort(() => {
      return 0.5 - Math.random();
    });

    let _this = this;
    let table = uni.getStorageSync("nowTable");
    // 获取用户信息
    let resA = await _this.$api.session(table);
    _this.user = resA.data;
    _this.btnColor = _this.btnColor.sort(() => {
      return 0.5 - Math.random();
    });

    //当前表的 中医药科普类型 字段 字典表查询方法
    let xiquTypes = await this.$api.page("dictionary", {
      page: 1,
      limit: 100,
      dicCode: "xiqu_types",
    });
    this.xiquTypesList = xiquTypes.data.list;
    //当前表的 是否上架 字段 字典表查询方法
    let shangxiaTypes = await this.$api.page("dictionary", {
      page: 1,
      limit: 100,
      dicCode: "shangxia_types",
    });
    this.shangxiaTypesList = shangxiaTypes.data.list;

    this.hasNext = true;
    // 重新加载数据
    if (this.mescroll) this.mescroll.resetUpScroll();
  },
  onLoad() {
    this.hasNext = true;
    // 重新加载数据
    if (this.mescroll) this.mescroll.resetUpScroll();
  },
  methods: {
    //类型条件查询
    async showDrawer() {
      this.$refs.showRight.open();
    },
    async closeDrawer() {
      this.$refs.showRight.close();
    },
    //下载
    download(url) {
      let _this = this;
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            _this.$utils.msg("下载成功");
            window.open(url);
          }
        },
      });
    },
    //查询条件切换
    queryChange(e) {
      this.searchForm.xiqu_collectionName = "";
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*下拉刷新的回调 */
    downCallback(mescroll) {
      this.hasNext = true;
      // 重置分页参数页数为1
      mescroll.resetUpScroll();
    },
    /*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
    async upCallback(mescroll) {
      let params = {
        page: mescroll.num,
        limit: mescroll.size,
      };

      let _this = this;
      let res = await this.$api.page(`xiquCollection`, params);
      res.data.list.forEach(function (item, index) {});

      if (mescroll.num == 1) this.list = [];
      this.list = this.list.concat(res.data.list);
      if (res.data.list.length == 0) this.hasNext = false;
      mescroll.endSuccess(mescroll.size, this.hasNext);
    },
    //添加地址
    onSelectTap(item) {
      uni.setStorageSync("address", item);
      uni.navigateBack({
        delta: 1,
      });
    },
    // 详情

    onDetailTap(item) {
      this.$utils.jump(`../xiqu/detail?id=${item.xiquId}`);
    },
    // 修改
    onUpdateTap(id) {
      this.$utils.jump(`./add-or-update?id=${id}`);
    },
    // 添加
    onAddTap() {
      this.$utils.jump(`./add-or-update`);
    },
    onDeleteTap(id) {
      var _this = this;
      uni.showModal({
        title: "提示",
        content: "是否确认删除",
        success: async function (res) {
          if (res.confirm) {
            await _this.$api.del("xiquCollection", JSON.stringify([id]));
            _this.hasNext = true;
            // 重置分页参数页数为1
            _this.mescroll.resetUpScroll();
          }
        },
      });
    },
    onShenhe(data, shenheTypes) {
      var _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要这个审核状态么?",
        success: async function (res) {
          if (res.confirm) {
            var currentTime = new Date();
            var year = currentTime.getFullYear();
            var month =
              currentTime.getMonth() + 1 < 10
                ? "0" + (currentTime.getMonth() + 1)
                : currentTime.getMonth() + 1;
            var day =
              currentTime.getDate() < 10
                ? "0" + currentTime.getDate()
                : currentTime.getDate();
            var hour = currentTime.getHours();
            var minute = currentTime.getMinutes();
            var second = currentTime.getSeconds();
            var shijian =
              year +
              "-" +
              month +
              "-" +
              day +
              " " +
              hour +
              ":" +
              minute +
              ":" +
              second;

            data.xiquCollectionYesnoTypes = shenheTypes;
            data.xiquCollectionShenheTime = shijian;
            await _this.$api.update(`xiquCollection`, data);
            _this.hasNext = true;
            // 重置分页参数页数为1
            _this.mescroll.resetUpScroll();
          }
        },
      });
    },
    // 搜索
    async search() {
      this.mescroll.num = 1;
      let searchForm = {
        page: this.mescroll.num,
        limit: this.mescroll.size,
      };
      if (this.searchForm.xiquName) {
        searchForm["xiquName"] = this.searchForm.xiquName;
      }

      let res = await this.$api.page(`xiquCollection`, searchForm);
      let _this = this;
      res.data.list.forEach(function (item, index) {});
      // 如果是第一页数据置空
      if (this.mescroll.num == 1) this.list = [];
      this.list = this.list.concat(res.data.list);
      if (res.data.list.length == 0) this.hasNext = false;
      this.mescroll.endSuccess(this.mescroll.size, this.hasNext);
    },
  },
};
</script>
<style lang="scss" scoped>
/* 颜色变量 */
$primary-color: #2d8cf0;
$success-color: #19be6b;
$warning-color: #ff9900;
$error-color: #ed4014;
$text-color: #333;
$bg-color: #f8f8f8;
$border-color: #eee;

/* 搜索容器 */
.search-container {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: $bg-color;
    border-radius: 50rpx;
    overflow: hidden;

    .search-input {
      flex: 1;
      height: 70rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: $text-color;
    }

    .search-btn {
      width: 90rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(45deg, $primary-color, #58a7ff);

      .icon-search {
        color: #fff;
        font-size: 30rpx;
      }
    }
  }

  .add-btn {
    width: 80rpx;
    height: 70rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, $success-color, #47d68c);
    border-radius: 12rpx;

    .icon-plus {
      color: #fff;
      font-size: 40rpx;
    }
  }
}

/* 列表容器 */
.list-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background: $bg-color;
}

/* 通用列表项 */
.list-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  transition: all 0.3s;
  margin-bottom: 20rpx;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.06);

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .item-image {
    width: 100%;
    height: 300rpx;
    background: #f0f0f0;
  }

  .item-content {
    padding: 20rpx;

    .item-title {
      font-size: 30rpx;
      color: $text-color;
      font-weight: 500;
      line-height: 1.4;
    //   @include text-ellipsis(2);
    }

    .item-value {
      margin: 15rpx 0;

      .price {
        color: $error-color;
        font-size: 34rpx;
        font-weight: bold;
      }

      .value {
        color: $text-color;
        font-size: 28rpx;
      }
    }

    .item-actions {
      display: flex;
      justify-content: flex-end;
      border-top: 1rpx solid $border-color;
      padding-top: 20rpx;

      .action-btn {
        padding: 8rpx 20rpx;
        margin-left: 20rpx;
        border-radius: 8rpx;
        font-size: 26rpx;

        &.edit {
          color: $primary-color;
          background: rgba($primary-color, 0.1);
        }

        &.delete {
          color: $error-color;
          background: rgba($error-color, 0.1);
        }

        .iconfont {
          margin-right: 8rpx;
        }
      }
    }
  }
}

/* 正常尺寸项 */
.normal-item {
  width: calc(50% - 10rpx);
  margin-right: 20rpx;

  &:nth-child(even) {
    margin-right: 0;
  }
}

/* 全宽项 */
.full-item {
  width: 100%;
  display: flex;

  .item-image {
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
  }

  .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* 文字截断 */
// @mixin text-ellipsis($lines: 1) {
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-line-clamp: $lines;
//   -webkit-box-orient: vertical;
// }
</style>
